<template>
  <div>
    <z-table
        :table-attrs="{stripe: true}"
        :columns="$_columns" height="auto" :selectable="false"
        :sequence="false"
        :data="o.data" :pagination="false"></z-table>
  </div>
</template>

<script>
export default {
  name: "DocProps",
  props: {
    data: {
      type: Array
    },
    defType: {
      type: String
    },
    columns: {
      type: Array,
      default() {
        return [
          {
            label: '参数名',
            prop: 'name',
            width: '120px'
          },
          {
            label: '类型',
            prop: 'type',
            width: '120px'
          },
          {
            label: '默认值',
            prop: 'defVal',
            width: '240px'
          },
          {
            label: '可选值',
            prop: 'selVal',
            width: '300px'
          },
          {
            label: '描述',
            prop: 'desc',
          }
        ]
      }
    }
  },
  computed: {
    $_columns() {
      if (this.defType === 'Methods') {
        return [
          {
            label: '方法名',
            prop: 'name',
            width: '220px'
          },
          {
            label: '说明',
            prop: 'desc',
          },
          {
            label: '参数',
            prop: 'params',
            width: '220px'
          },
        ]
      }
      if (this.defType === 'Events') {
        return [
          {
            label: '事件名',
            prop: 'name',
            width: '220px'
          },
          {
            label: '说明',
            prop: 'desc',
          },
          {
            label: '回调参数',
            prop: 'params',
            width: '220px'
          },
        ]
      }
      if (this.defType === 'Slots') {
        return [{
          label: '参数名',
          prop: 'name',
          width: '240px'
        }, {
          label: '描述',
          prop: 'desc',
        }]
      }
      return this.o.columns ?? []
    }
  },
  setup(props) {
    let o = {
      columns: props.columns,
      data: props.data
    }
    return {
      o
    }
  }
}
</script>

<style scoped>

</style>
